import { PenChildProps } from "@/types";
import { Button, InputNumber, Select, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import { AnimateTypes, animateTypes } from "@/config/animateTypes.ts";
import { PensSelection } from "@/components/common/PensSelection.tsx";
import { useState } from "react";
import { DeleteOutlined } from "@ant-design/icons";
import AnimationFrames from "@/components/Configuration/PenProps/components/AnimationFrames.tsx";

export function AnimationMain({ penOptions, setPenValue }: PenChildProps) {
  const [open, setOpen] = useState(false);
  const [openFrames, setOpenFrames] = useState(false);

  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label="动画时长">
          <span>{penOptions.showDuration || "0"}</span>
        </FormRowCol>
        <FormRowCol label={"动画效果"}>
          <Select
            className={"w-full"}
            value={penOptions.animateType}
            options={[
              { label: "无", value: "not" },
              { label: "上下跳动", value: "upDown" },
              { label: "左右跳动", value: "leftRight" },
              { label: "心跳", value: "heart" },
              { label: "成功", value: "success" },
              { label: "警告", value: "warning" },
              { label: "错误", value: "error" },
              { label: "炫耀", value: "show" },
              { label: "旋转", value: "rotate" },
              { label: "自定义", value: "custom" },
            ]}
            onSelect={(value: string) => {
              window.meta2d.setValue({
                id: penOptions.id,
                animateType: value,
                frames: animateTypes[value as AnimateTypes][
                  "frames"
                ] as never[],
                showDuration:
                  animateTypes[value as AnimateTypes]["showDuration"],
              });
              setPenValue("animateType", value);
            }}
          />
        </FormRowCol>
        {penOptions.animateType == "custom" && (
          <FormRowCol label="动画帧">
            <Button onClick={() => setOpenFrames(true)}>编 辑</Button>
          </FormRowCol>
        )}
        <AnimationFrames
          open={openFrames}
          onOk={() => setOpenFrames(false)}
          onCancel={() => setOpenFrames(false)}
          setPenValue={setPenValue}
          penOptions={penOptions}
        ></AnimationFrames>
        <FormRowCol label="循环次数">
          <InputNumber
            placeholder={"Infinity"}
            className={"w-full"}
            value={penOptions.animateCycle}
            onChange={(value) => {
              setPenValue("animateCycle", value);
            }}
          />
        </FormRowCol>
        <FormRowCol label="自动播放">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.autoPlay}
            onChange={(checked) => {
              setPenValue("autoPlay", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol
          label="保持状态"
          illustrate={"动画播放（次数）结束，是否回到初始状态"}
        >
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.keepAnimateState}
            onChange={(checked) => {
              setPenValue("keepAnimateState", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol
          label="下个动画"
          illustrate={"当前 pen 播放动画结束，自动播放下一个动画。"}
        >
          <PensSelection
            open={open}
            value={penOptions.nextAnimate || ""}
            onOk={(id) => {
              setPenValue("nextAnimate", id);
              setOpen(false);
            }}
            onClose={() => setOpen(false)}
          ></PensSelection>
          <Button onClick={() => setOpen(true)}>
            {penOptions.nextAnimate || "选择"}
          </Button>
          <Button
            onClick={() => setPenValue("nextAnimate", undefined)}
            style={{ marginLeft: 5 }}
            icon={<DeleteOutlined />}
          ></Button>
        </FormRowCol>
        <Space size={[20, 20]}>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.startAnimate(penOptions.id);
            }}
          >
            播放
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.pauseAnimate(penOptions.id);
            }}
          >
            暂停
          </Button>
          <Button
            type={"primary"}
            onClick={() => {
              window.meta2d.stopAnimate(penOptions.id);
            }}
          >
            停止
          </Button>
        </Space>
      </Space>
    </>
  );
}
